<template>
	<div>
		<Table ref="table" :columns="tableColumns" :data="tableData" :loading="loading" :size="tableSize" class="ivu-mt">
			<template #roleCodeList="{ row }">
				<CheckboxGroup v-model="row.roleCodeList" @on-change="onSubmitRoles(row)">
					<Checkbox v-for="role in roles.filter(i => !['N', 'B', 'SYSTEM'].includes(i.roleCode))" :key="role.id"
						:label="role.roleCode">
						<span style="font-size: 12px;">{{ role.roleName }}</span>
					</Checkbox>
				</CheckboxGroup>
			</template>
		</Table>
	</div>
</template>
<script>
import { mapState } from 'vuex';
import { cloneDeep } from 'lodash';
import menuSider from '@/menu/sider';
import { getMenuList, saveMenu } from '@/api/org'
import { getMenuSiderByCondition } from '@/libs/system';

const copyMenus = cloneDeep(menuSider)

export default {
	data() {
		return {
			columns: [
				{
					type: 'index',
					width: 60,
					align: 'center',
					show: true
				},
				{
					title: '主菜单',
					key: 'fTitle',
					width: 120,
					show: true
				},
				{
					title: '子菜单',
					key: 'sTitle',
					width: 100,
					show: true
				},
				{
					title: '菜单路径',
					key: 'path',
					width: 210,
					show: true
				},
				{
					title: '菜单权限',
					key: 'roleCodeList',
					slot: 'roleCodeList',
					show: true
				}
			],
			loading: false,
			tableSize: 'small',
			tableFullscreen: false,
			menuAccesses: []
		}
	},
	computed: {
		...mapState('admin/common', [
			'publicConfig'
		]),
		...mapState('admin/user', [
			'info'
		]),
		...mapState('admin/role', [
			'roles'
		]),
		// 动态设置列
		tableColumns() {
			const columns = [...this.columns];
			return columns.filter(item => item.show);
		},
		dropdownColumns() {
			return this.columns.filter(item => item.title)
		},
		tableData() {
			const data = []

			const filterCopyMenus = getMenuSiderByCondition(copyMenus, {
				...(this.publicConfig || {})
			})

			filterCopyMenus.forEach(firstLevel => {
				if (firstLevel.children && firstLevel.children.length) {
					firstLevel.children.forEach(secondLevel => {
						data.push({
							fTitle: firstLevel.title,
							sTitle: secondLevel.title,
							path: secondLevel.path,
							roleCodeList: this.getRoleCodeList(secondLevel.code)
						})
					})
				} else {
					data.push({
						fTitle: firstLevel.title,
						sTitle: firstLevel.title,
						path: firstLevel.path,
						roleCodeList: this.getRoleCodeList(firstLevel.code)
					})
				}
			})
			return data
		}
	},
	mounted() {
		this.onGetMenuList()
	},
	methods: {
		async onGetMenuList() {
			this.loading = true
			const response = await getMenuList({})
			this.menuAccesses = response || []
			this.loading = false
		},
		onFullscreen() {
			this.tableFullscreen = !this.tableFullscreen;
			this.$emit('on-fullscreen', this.tableFullscreen);
		},
		getRoleCodeList(code) {
			const roleCodeList = []
			const menuItem = this.menuAccesses.find(item => item.menuCode === code)
			if (menuItem) {
				roleCodeList.push(...(menuItem.roleCodeList || []))
			}
			return roleCodeList
		},
		async onSubmitRoles(row) {
			this.loading = true
			await saveMenu({
				menuCode: row.path.substring(1),
				roleCodeList: row.roleCodeList
			})
			this.loading = false
			this.$Message.success('修改成功')
		}
	}
}
</script>
